<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/style.css" />
    <script type="text/javascript" src="../../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form action="index.html" method="post" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">角色名称</td>
            <td><input id="rName" type="text" name="title"/><span id="rNameMsg"></span></td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" name="status" value="1" checked/> 启用
                <input type="radio" name="status" value="0"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">权限</td>
            <td id="permission">

            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button type="button" id="add" class="btn btn-primary" type="button">保存</button> &nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    let mIdList=[];
    let rId=null;
    function validatarname() {
        var name = $("#rName").val();
        var msg = $("span[id='rNameMsg']");
        $.getJSON("/role/getrolelist.do",null,function (vo){
            let roleList=vo.list;
            for(let i=0;i<roleList.length;i++){
                if(name==roleList[i].rName){
                    msg.html("角色名已存在").css("color", "red");
                    return false;
                }
            }
        });

        if(name == "") {
            msg.html("角色不能为空").css("color", "red");
            return false;
        } else {
            msg.html("ok").css("color", "green");
            return true;
        }
    }

    function validataState() {
        var all = $("input[name='status']");
        for(var i = 0; i < all.length; i++) {
            if($(all[i]).prop("checked")) {
                return true;
            }
        }
        alert("状态为必选项");
        return false;
    }

    function validataPermission() {
        var all = $("input[name='check']");
        for(var i = 0; i < all.length; i++) {
            if($(all[i]).prop("checked")) {
                return true;
            }
        }
        alert("状态为必选项");
        return false;
    }

    $(function() {
        $("#rName").blur(function() {
            validatarname();
        });
    });

    $(function () {
        $(':checkbox[name="group[]"]').click(function () {
            $(':checkbox', $(this).closest('li')).prop('checked', this.checked);
        });

		$('#backid').click(function(){
				window.location.href="/pages/role/index.html";
		 });

		$.getJSON("/role/getmenuinfo.do",null,function (vo){
		    if(vo.code==200){
		        let list=vo.list;
		        let str="";
		        for(let i=0;i<list.length;i++){
		            str+="<ul><label class='checkbox inline'><input type='checkbox' name='check' value=\""+list[i].mId+"\" />"+list[i].mName+"</label></ul>";
                }
		        $("#permission").html(str);
		    }
        });
        $("#add").click(function (){
            if (validatarname()&&validataPermission()&&validataState()){
                let rName=$("#rName").val();
                let rState=$("input[name='status']:checked").val();
                console.log(rState);
                let mIds=$("input[name='check']:checked");
                for(let i=0;i<mIds.length;i++){
                    mIdList.push($(mIds[i]).val());
                }
                let role={
                    rName:rName,
                    rState:rState,
                }

                $.getJSON("/role/add.do",role,function (vo){
                    rId=vo.obj;
                });

                setTimeout(listctrl,1000);
            }
        });
    });

    function listctrl(){
        $.ajax({
            url: "/role/updaterolelist.do",
            type: "POST",
            data: {
                "rId":rId,
                "mIdList": mIdList,
            },
            traditional: true,//这里设置为true
            success: function(vo) {
                if(vo.code==200){
                    alert("修改成功");
                    window.location.href="/pages/role/index.html";
                }else {
                    alert(vo.msg);
                }
            }
        });
    }
</script>